<template lang="pug">
	.container
		.i-head
			.i-h-bg
			.i-h-menu
				.m-item
					img(src='../../assets/image/common/s_menu_yuyue.png')
					.m-i-right
						.title 预约挂号
						.desc 看病提前预约
				.m-item
					img(src='../../assets/image/common/s_menu_jiaofei.png')
					.m-i-right
						.title 就诊缴费
						.desc 医保在线结算
			.i-h-card
				block(v-if="cardFlag")
					.name 张三四
					.authen(:class="{in:authenFlag}") {{authenFlag?'已认证':'未认证'}}
					.id-card 身份证：331003199098989787878998
					.phone 手机号：178787987988
					.i-c-bottom
						.i-c-left
							.title 健康卡
							.number 8989889890787878970
						.i-c-right
							.c-select
								img(src='../../assets/image/common/switch.png')
								| 选择就诊卡
				block(v-if="!cardFlag")
					.tip
						| 您还未绑定就诊卡，暂无法预约挂号，请尽快完成添加！
					.i-h-add(@click="") 添加就诊卡
		.module-wrap
			.module-list
				.module-item(v-for="(item,index) in moduleList" :key="index")
					div
						img(:src="item.img")
						.name {{item.name}}
</template>

<script>
import yuyue from '@/assets/image/common/s_menu_yuyue.png'
import more from '@/assets/image/common/s_menu_more.png'
import jiuzhenka from '@/assets/image/common/s_menu_jiuzhenka.png'
import jiezhong from '@/assets/image/common/s_menu_jiezhong.png'
import fapiao from '@/assets/image/common/s_menu_fapiao.png'
import dangan from '@/assets/image/common/s_menu_dangan.png'
import baogao from '@/assets/image/common/s_menu_baogao.png'
import yufu from '@/assets/image/common/s_menu_yufu.png'
export default {
	data() {
		return {
			moduleList: [],
			iMenu: [],
			cardFlag: true, //有无卡标识
			authenFlag: true //认证标识
		}
	},
	computed: {},
	mounted() {
		this.moduleList = [
			{ name: '报告查询', img: baogao, path: '' },
			{ name: '预约记录', img: '', path: '' },
			{ name: '就诊记录', img: '', path: '' },
			{ name: '电子发票', img: fapiao, path: '' },
			{ name: '账户中心', img: '', path: '' },
			{ name: '关于我们', img: more, path: '' }
		]
	},
	onPullDownRefresh() {},
	onPageScroll(e) {},
	methods: {
		jumpWebView(url, title, openType) {
			url = this.wx.arrayBufferToBase64(url)
			title = this.wx.arrayBufferToBase64(title)
			this.$router.push({
				path: '/views/webview/webview',
				query: {
					url: url,
					title: title
				}
			})
		}
	},
	components: {}
}
</script>

<style lang="stylus">
	page
		background-color #fff
	.container
		background-color backgroundColor
	.i-head
		margin-bottom mainMargin
		.i-h-bg
			background-color themeColor
			height 320px
		.i-h-menu
			display flex
			align-items center
			padding-top 120px
			background-color #fff
			.m-item
				width 50%
				display flex
				align-items center
				justify-content center
				height 160px
				position relative
				box-sizing border-box
				img
					width 112px
					height 112px
					margin-right 16px
				.m-i-right
					.title
						font-size 36px
						padding 0 0 6px
					.desc
						font-size 26px
						color grayFontColor
				&:last-child:before
					content ''
					position absolute
					top 50px
					bottom 50px
					left 0
					width 1px
					background-color #eee
		.i-h-card
			background-color white
			padding 0 mainPadding
			height 400px
			box-shadow:0 4px 30px 0 rgba(0,0,0,0.05)
			border-radius 10px
			position absolute
			top 40px
			left 30px
			right 30px
			font-size 32px
			box-sizing border-box
			.tip
				padding 120px 60px 40px
				text-align center
			.i-h-add
				border-radius 16px
				width 200px
				height 68px
				line-height 68px
				background-color themeColor
				color white
				margin 0 auto
				text-align center
		.name
			padding 50px 0 40px 0
			font-size 36px
		.authen
			position absolute
			top 50px
			right 20px
			padding 0 20px
			background #aaa
			color #fff
			border-radius 10px
			font-size 28px
			&.in
				background-color themeColor
		.id-card,.phone
			color grayFontColor88
			font-size 26px
			line-height 34px
		.i-c-bottom
			margin 40px 0 0 0
			display flex
			align-items center
			justify-content space-between
			font-size 28px
			.i-c-left
				width 60%
				.title
					color grayFontColor88
			.i-c-right
				white-space nowrap
				.c-select
					padding 8px 16px
					border 1px solid grayBorder
					border-radius 10px
					color grayFontColor88
					img
						width 28px
						height 28px
						vertical-align -2px
	.module-wrap
		position relative
		background-color white
		padding mainPadding
		.module-list
			display flex
			flex-direction row
			flex-wrap wrap
			.module-item
				width 33.3%
				height 50%
				display flex
				align-items center
				justify-content center
				text-align center
				font-size 26px
				color blackFontColor
				margin-bottom mainMargin
				img
					width 80px
					height 80px
				.name
					margin-top 4px
</style>
